<template>
    <div class="container-steps">
        <div>
            <el-steps :active="active" finish-status="success" direction="vertical" style="height:600px">
                <el-step v-for="(item, index) in history" :title="item.label" :key="index" description="描述">
                    <template #description>
                        <!-- 自定义组件作为步骤描述 -->
                        <el-card>
                            这是一段自定义描述
                        </el-card>
                    </template>
                </el-step>
            </el-steps>
            <el-button style="margin-top: 12px" @click="next">Next step</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(0)

const history = ref([
    { id: '0', label: "方案制定" },
    { id: '1', label: "割接方案会审" },
    { id: '2', label: "割接审批" },
    { id: '3', label: "审批成功" },
]);


const next = () => {
    if (active.value++ > history.value.length - 1) active.value = 0
}
</script>

<style scoped>
.container-steps {
    padding: 20px;
}
</style>